import React, { Component } from 'react'
import { Layout, Menu } from 'antd';

import logo from '../img/logo.png';
import userIcon from '../img/user2.png';
import logout from '../img/logout.png';

export class Header extends Component {
  color = {
    1: {color: 'white'}, 
    2: {color: 'white'}, 
    3: {color: 'white'}, 
    4: {color: 'black'}, 
    6: {color: 'black'}
  }

  render() {
    const { Header } = Layout
    const { user } = this.props
    const isLogined = user.get('id') !== -1

    const menuItemStyle = {
      width: '7em',
      textAlign: 'center',
      fontSize: '1.5em'
    }

    return (
    <Header style={{height: 80, background: '#EF8558'}}>
        <img src={logo} alt="" className="logo" />
        <Menu
          // theme="dark"
          mode="horizontal"
          selectedKeys={this.getSelectedKeysWithLocation()}
          style={{ lineHeight: '80px', background: '#EF8558' }}
          onClick={this.handleMenuClick}
        >
        <Menu.Item style={{...menuItemStyle, ...this.color[1]}} key="1">发起会议</Menu.Item>
        <Menu.Item style={{...menuItemStyle, ...this.color[2]}} key="2">加入会议</Menu.Item>
        <Menu.Item style={{...menuItemStyle, ...this.color[3]}} key="3">我的会议</Menu.Item>
        {isLogined ? (
          <Menu.Item style={{'float': 'right', ...menuItemStyle, ...this.color[6]}} key="6">
            <span>
              <img src={logout} alt='...' style={{
                width: '22px', 
                height: '22px',
                marginBottom: '6px'
              }} />
              &nbsp;注销
            </span>
          </Menu.Item>
        ) : ''}
        <Menu.Item style={{'float': 'right', ...menuItemStyle, ...this.color[4], width: '10em',}} key="4">
          {isLogined ? <span>
              <img src={userIcon} alt='...' style={{
                  width: '22px', 
                  height: '22px',
                  marginBottom: '6px'
                }} />
                &nbsp;&nbsp;{`${user.get('name')}，欢迎使用`}
            </span> : '登录'} 
        </Menu.Item>
        </Menu>
    </Header>
    )
  }

  handleMenuClick = ({item, key}) => {
    this.color = {
      1: {color: 'white'}, 
      2: {color: 'white'}, 
      3: {color: 'white'}, 
      4: {color: 'black'}, 
      6: {color: 'black'}
    }
    this.color[key].color = 'black'
    switch (key) {
      case '1':
        this.changeLocation('/new')
        break;
      case '2':
        this.changeLocation('/join')
        break;
      case '3':
        this.changeLocation('/my')
        break;
      case '4':
        if (this.props.user.get('id') !== -1)
          this.changeLocation('/me')
        else
          this.changeLocation('/login')
        break;
      case '5':
        this.changeLocation('/me')
        break;
      case '6':
        this.props.logout()
        this.changeLocation(this.props.location.pathname === '/me' ? '/login' : this.props.location.pathname)
        break;
      default:
        break;
    }
  }

  changeLocation = (location) => {
    if(this.props.user.get('id') !== -1 && 
      this.props.location.pathname !== location) {
      this.props.history.push(location)
    }
  }

  getSelectedKeysWithLocation = () => {
    return this.resolveLocationWithKeys(this.props.location.pathname)
  }

  resolveLocationWithKeys = (location) => {
    let defaultSelectedKeys
    switch (location) {
      case '/':
        defaultSelectedKeys = ['1']
        this.color[1].color = 'black'
        break;
      case '/new':
          defaultSelectedKeys = ['1']
          this.color[1].color = 'black'
        break;
      case '/join':
          defaultSelectedKeys = ['2']
          this.color[2].color = 'black'
        break;
      case '/my':
          defaultSelectedKeys = ['3']
          this.color[3].color = 'black'
        break;
      case '/me':
          defaultSelectedKeys = ['4']
          this.color[4].color = 'black'
        break;
      case '/login':
          defaultSelectedKeys = ['4']
          this.color[4].color = 'black'
        break;
      default:
        break;
    }
    return defaultSelectedKeys
  }
}

export default Header
